<template>
    <div class="app-container">
      <el-form>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
        <el-form-item  prop="roleName">
          <el-input
            v-model="queryParams.workshopName"
            placeholder="请输入车间名称"
            clearable
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        
        <el-form-item>
          <el-row :gutter="10" class="mb8">
          <el-button 
            type="primary" 
            icon="el-icon-search" 
            size="medium" 
            @click="handleQuery"
          >搜索</el-button>
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="medium"
            @click="handleAdd"
            v-hasPermi="['aqsc:manage:add']"
          >新增</el-button>
          <el-button
            type="success"
            plain
            icon="el-icon-edit"
            size="medium"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="['aqsc:manage:update']"
          >编辑</el-button>
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="medium"
            @click="handleExport"
            v-hasPermi="['system:role:export']"
          >导入</el-button>
                <el-button
                    type="warning"
                    plain
                    icon="el-icon-download"
                    size="medium"
                    @click="handleExport"
                    v-hasPermi="['system:role:export']"
                >导出</el-button>
                
            <ri刷新ght-toolbar :showSearch.sync="showSearch" @queryTable="getList"></ri刷新ght-toolbar>
        </el-row>
        </el-form-item>
      
      </el-form>
     
  
      <el-table v-loading="loading" :data="cjxxList" border @selection-change="handleSelectionChange" slot-sc>
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="车间名称" prop="workshopName" width="150" />
        <el-table-column label="所属部门" prop="departmentsName" width="150" />
        <el-table-column label="占地面积" prop="floorSpace" width="150" />
        <el-table-column label="层数" prop="layerNumber" width="150" />
        <el-table-column label="建筑结构" prop="buildingStructure" width="150" />
        <el-table-column label="火灾危险等级" prop="dangerLevel" width="150" />
        <el-table-column label="耐火等级" prop="fireRating" width="150" />
        <el-table-column label="图纸附件" prop="scenePhotos" width="150" >     
          <el-upload class="upload-demo" action="/api/system/manage"
          :on-preview="handlePreview" 
          :on-remove="handleRemove" 
          :before-remove="beforeRemove" 
          multiple :limit="3"
          :on-exceed="handleExceed" 
          :file-list="fileList">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        </el-table-column>
        
        <el-table-column label="编辑时间" align="center" prop="createTime" width="150">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
            
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" prop="" width="150"></el-table-column>
      </el-table>
                 <el-button
                    size="medium"
                    @click="handleDelete"
                    v-hasPermi="['system:role:export']"
                >批量删除</el-button>
     
      
    </el-form>
      <!-- 添加或修改车间信息对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="500x" append-to-body label="车间信息详情">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="车间名称" prop="workshopName">
            <el-input v-model="form.workshopName" width="120px" />
          </el-form-item>
          
          <el-form-item label="所属部门" prop="departmentsName">
            <el-input v-model="form.departmentsName" width="120px"/>
          </el-form-item>
          <el-form-item label="车间编号" prop="id">
            <el-input v-model="form.id" width="120px"/>
          </el-form-item>
          <el-form-item label="占地面积" prop="floorSpace">
            <el-input v-model="form.floorSpace" />
          </el-form-item>
          <el-form-item label="层数" prop="layerNumber">
            <el-input v-model="form.layerNumber" />
          </el-form-item>
          <el-form-item label="建筑结构" prop="buildingStructure">
            <template>
                <el-select v-model="form.buildingStructure" placeholder="请选择" >
                    <el-option
                    v-for="item in optionsbuildingStructure"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    >
                    </el-option>
                </el-select>
            </template>
          </el-form-item>
          <el-form-item label="火灾危险等级" prop="dangerLevel">
            <template>
                <el-select v-model="form.dangerLevel" placeholder="请选择" >
                    <el-option
                    v-for="item in optionsdangerLevel"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    >
                    </el-option>
                </el-select>
            </template>
          </el-form-item>
          <el-form-item label="耐火等级" prop="fireRating">
            <template>
                <el-select v-model="form.fireRating" placeholder="请选择" >
                    <el-option
                    v-for="item in optionsfireRating"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    >
                    </el-option>
                </el-select>
            </template>
          </el-form-item>
          <el-form-item label="备注" prop="note">
            <el-input v-model="form.note" type="textarea" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="现场照片" prop="paperAttach">
            <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-change="handleChange"
                :file-list="fileList">
                <el-button size="small" type="primary">点击上传</el-button>
                
            </el-upload>
          </el-form-item>
          <el-form-item label="图纸附件" prop="scenePhotos">
            <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-change="handleChange"
                :file-list="fileList">
                <el-button size="small">选择...</el-button>
                
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
            <div class="block">
              <span class="demonstration"></span>
              <el-pagination style="float:right"
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryParams.pageNumber"
                    :page-sizes="[5, 10, 15, 30]"
                    :page-size="queryParams.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @pagination="getList">
              </el-pagination>
  </div>
    </div>
  </template>
  <script>
  import { add,update,list,findById,deleteByIds } from "@/api/aqsc/manage";

  
  export default {
    name: "cjxx",
    dicts: ['sys_normal_disable'],
    data() {
        
      return {
        // 建筑结构的下拉框
        optionsbuildingStructure:[
        {
            value:'钢混结构',
            label:'钢混结构'
        },
        {
            value:'混砖结构',
            label:'混砖结构'
        },{
            value:'混砖结构',
            label:'钢结构'
        },{
            value:'混砖结构',
            label:'框架结构'
        }],
        // 火灾危险等级下拉框
        optionsdangerLevel:[{
            value:'甲类',
            label:'甲类'
        },{
            value:'乙类',
            label:'乙类'
        },{
            value:'丙类',
            label:'丙类'
        },{
            value:'丁类',
            label:'丁类'
        },{
            value:'戊类',
            label:'戊类'
        }],
        // 耐火等级下拉框
        optionsfireRating:[{
          value:'一级',
          label:'一级'
        },{
          value:'二级',
          label:'二级'
        },{
          value:'三级',
          label:'三级'
        },{
          value:'四级',
          label:'四级'
        }],
        
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 车间信息表格数据
        cjxxList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNumber: 1,
          pageSize: 5,
          cjxxName: undefined,
          cjxxKey: undefined,
          status: undefined
        },
        //  // 设置上传的请求头部
        //  headers: { Authorization: "Bearer " + getToken() },
        // // 上传的地址
        // url: process.env.VUE_APP_BASE_API + "/aqsc/manage/importData",
        // 表单参数
        form: {
          buildingStructure: '',
          fireRating:'',
          dangerLevel:''
          
        },
        defaultProps: {
          children: "children",
          label: "label"
        },
        // 表单校验
        rules: {
          workshopName: [
            { required: true, message: "不能为空", trigger: "blur" }
          ],
          departmentsName: [
            { required: true, message: "不能为空", trigger: "blur" }
          ],
          workshopName: [
            { required: true, message: "不能为空", trigger: "blur" }
          ],
          floorSpace: [
            { required: true, message: "不能为空", trigger: "blur" }
          ],id: [
            { required: true, message: "不能为空", trigger: "blur" }
          ],

        }
      };
    },
    created() {
      this.getList();
      
    },
    methods: {
      handleSizeChange(queryParams) {
        console.log(`每页 ${this.queryParams.pageSize} 条`);
        this.getList();
      },
      handleCurrentChange(queryParams) {
        console.log(`当前页: ${this.queryParams.pageNumber}`);
        this.getList()
      },
      handleChange(file, fileList) {
        this.fileList = fileList.slice(-3);
      },
      /** 查询角色列表 */
      getList() {
        this.loading = true;
        list(this.queryParams).then(response=>{
          this.cjxxList = response.rows,
          this.total = response.total
          this.loading = false
        })
      },
    
      // 所有菜单节点数据
      getMenuAllCheckedKeys() {
        // 目前被选中的菜单节点
        let checkedKeys = this.$refs.menu.getCheckedKeys();
        // 半选中的菜单节点
        let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
        checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
        return checkedKeys;
      },
      // 所有部门节点数据
      getDeptAllCheckedKeys() {
        // 目前被选中的部门节点
        let checkedKeys = this.$refs.dept.getCheckedKeys();
        // 半选中的部门节点
        let halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys();
        checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
        return checkedKeys;
      },
     
     
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      
      // 表单重置
      reset() {
        if (this.$refs.menu != undefined) {
          this.$refs.menu.setCheckedKeys([]);
        }
        this.menuExpand = false,
        this.menuNodeAll = false,
        this.deptExpand = true,
        this.deptNodeAll = false,
        this.form = {
          cjxxIds: undefined,
          cjxxName: undefined,
          cjxxKey: undefined,
          roleSort: 0,
          status: "0",
          menuIds: [],
          deptIds: [],
          menuCheckStrictly: true,
          deptCheckStrictly: true,
          remark: undefined
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.getList()
      },
     
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length!=1
        this.multiple = !selection.length
      },
      // 更多操作触发
      handleCommand(command, row) {
        switch (command) {
          case "handleDataScope":
            this.handleDataScope(row);
            break;
          case "handleAuthUser":
            this.handleAuthUser(row);
            break;
          default:
            break;
        }
      },
      
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加车间信息";
      },
      /** 修改按钮操作 */
      handleUpdate() { 
          this.reset();
          
          findById(this.ids).then(response=>{  
            this.open=true
            this.form = response.data
          })

        this.title = "修改角色";
        
      },     
      /** 提交按钮 */
      submitForm: function() {       
        this.$refs["form"].validate(response => {   
          if(response){
            
            if(this.form.id != null){    
                
              update(this.form).then(response=>{
                  
                this.$modal.message = response.msg,
                this.open=false
                this.getList()
              })
            }
           else {
            add(this.form).then(response=>{
              alert('新增')
             this.$modal.message = response.msg,
             this.open=false,
              this.getList()
              this.open=false
            
            })
          }
        }
        });
      },
      /** 删除按钮操作 */
      handleDelete() { 
        deleteByIds(this.ids).then(response=>{
          this.getList()
          
        })
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('system/role/export', {
          ...this.queryParams
        }, `role_${new Date().getTime()}.xlsx`)
      }
    }
  };
  </script>
.  